<template>
  <div class="repairmanEnd">
      <div class="headCrm-end mlcbg">
        <p class="billHead-end">
          <span class="el-icon-arrow-left" @click="returnPage"></span>
          <span class="headFont">完工</span>
          <button class="submit-follow" @click="submitFollow">提交</button>
        </p>            
      </div>

      <div class="contentCrm-end">
        <div class="repairmanEndlList">
            <ul>
                <li>
                    <p>客户名称</p>
                    <span>{{repairmanEndlList.customerName || '--'}}</span>
                </li>
                <li>
                    <p>售后类型</p>
                    <span>{{repairmanEndlList.saleAfterType || '--'}}</span>
                </li>
                <li>
                    <p>故障原因<span class="mlcfont">*</span></p>
                    <span>
                        <select class="selectScheme" v-model="selected" name="fruit">
                            <option value="">请选择</option>
                            <option :value="item.id" v-for="(item,index) in repairmanEndlList.failureCause" :key="index"
                            class="optiontext">{{item.name || '--'}}</option>
                        </select>   
                    </span>
                </li>
                <li>
                    <p>是否保修<span class="mlcfont">*</span></p>
                    <el-form ref="repairmanEndlList" :model="repairmanEndlList" label-width="1rem" class="but-switch">
                    <el-form-item label="">
                        <el-switch v-model="repairmanEndlList.GuaranteeInnerState"></el-switch>
                    </el-form-item>
                    </el-form>                   
                </li>

                <li>
                    <p>人工费</p>
                    <span>￥{{repairmanEndlList.laborCost || 0}}</span>
                </li>
                <li>
                    <p>上门费</p>
                    <span>￥{{repairmanEndlList.doortodoorFee || 0}}</span>
                </li>
                <li>
                    <p>总费用</p>
                    <span>￥{{repairmanEndlList.totalCost || 0}}</span>
                </li>
                <li>
                    <p>备注</p>
                    <textarea class="remarkText" placeholder="请输入内容"
                        v-model="textarea1" v-show="stateRemark" :class="textarea1.length>40?'':'on'">
                    </textarea>                     
                </li>
            </ul>
            <div class="picture-end">
                <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>
            
            <div class="part-submit">
                <div class="partlist" v-for="(tiar,index) in partSubmit" :key='index'>
                    <div>
                        <div class="el-icon-remove" @click="dlePart(index)"></div>
                        <select class="selectNewPart" v-model="tiar.selectedNew" name="fruit" @change="getNewProduct(selectedNew,index)">
                            <option value="">新增使用配件</option>
                            <option :value="item" v-for="(item,index) in partSubmit.newProducts" :key="index"
                            class="optiontext">{{(item.productName || '--') + (item.brand || '--') + (item.code || '--')}}</option>
                        </select>
                    </div>
                    <ul>
                        <li>
                            <p>数量</p>
                            <input v-model="tiar.numUser" type="text">
                        </li>
                        <li>
                            <p>金额</p>
                            <input type="text" v-model="tiar.moneyUser" @change="getTotal(tiar.moneyUser)">
                        </li>
                        <li>
                            <p>替换配件</p>
                            <input type="text" v-model="tiar.partrePlace">
                            <input type="text">
                        </li>
                        <li>
                            <p>数量</p>
                            <input type="text" v-model="tiar.numPlace">
                        </li>
                        <li>
                            <p>替换配件处理</p>
                            <select class="selectScheme" v-model="tiar.selectedChange" name="fruit">
                                <option value="">请选择</option>
                                <option :value="item1.id" v-for="(item1,index2) in tiar.handlePlace" :key="index2"
                                class="optiontext">{{item1.name}}
                                </option>
                            </select>                                                      
                        </li>
                    </ul>
                </div>
                <div class="add-Part" @click="addPart">
                    <span class="el-icon-circle-plus"></span>
                    <span class="add-Part-text">继续新增配件</span>
                </div>                
            </div>
        </div>          
      </div>

      <div class="footCrm">
      </div>
  </div>
</template>

<script>
    export default {
        name: 'repairmanEnd',
        data() {
            return {
                selected: '',
                repairmanEndlList:{
                    customerName:localStorage.getItem("customerName"),
                    saleAfterType:localStorage.getItem("tasktypeName"),
                    failureCause:[],
                    GuaranteeInnerState:true,
                    laborCost:'10',
                    totalCost:'20',
                    doortodoorFee:'10',
                    remark:'aaaabeizhubeizhubeizhubeizhuaaaabeizhubeizhubeizhubeizhuaaaabeizhubeizhubeizhubeizhu',
                },
                textarea1: '',
                stateRemark:true,
                dialogImageUrl: '',
                dialogVisible: false,
                partSubmit:[{
                    selectedChange:'',
                    selectedNew: '',
                    selectedOld: '',
                    partUser:'',
                    numUser:'',
                    moneyUser:'',
                    partrePlace:'',
                    numPlace:'',
                    handlePlace:[],//替换配件处理方案
                    newProducts:[],//新增使用配件
                    replaceProducts:[],//替换配件
                }]
            }
        },
        mounted: function(){
            // 获取故障原因档案
            this.getDocument('base_reason',this.repairmanEndlList.failureCause);
            // 获取替换配件处理方案
            this.partSubmit.forEach(item => {
                this.getDocument('base_oldproductprocess',item.handlePlace);
            }); 
            this.getUserPartsList();
        },
        methods: {
            returnPage:function(){
                this.$router.push({
                    path:'/repairmanDetail'
                })           
            },
            submitFollow:function(){
                let _this = this;
                let paramfetch = {//目前数据为静态的，需要后期处理
                    "id":parseInt(localStorage.getItem("detailId")),
                    "productId":43076,
                    "isGuaranteed":1,
                    "remark":"维修完成",
                    "labourPrice":100,
                    "doorPrice":200,
                    "totalPrice":500,
                    "reasonId":2,
                    "orderParts":[
                        {
                            "newProductId":4234,
                            "newProductName":"年娃春妮贺岁金条1",
                            "newProductName2":"",//预留字段
                            "newProductQuantity":2,
                            "oldProductId":4234,
                            "oldProductQuantity":2,
                            "oldProductName":"年娃春妮贺岁金条1",
                            "oldProductName2":"",
                            "productPrice":100,
                            "totalPrice":200,
                            "status":"add",
                            "oldProductProcessId":1
                        }
                    ],
                    "orderPhoto":[
                        {
                            "name":"Chrysanthemum1.jpg",
                            "url":"http://yonyoubucket.oss-cn-beijing.aliyuncs.com/attachment/1/936/Chrysanthemum1.jpg?Expires=1833179400&OSSAccessKeyId=LTAIDa0Tl3599ygR&Signature=6h4Hb3I9R45l0BMJyRHnRZrmS6A%3D",
                            "type":"jpg",
                            "size":1250,
                            "status":"add"
                        }
                    ]
                }
                this.$put(this.$root.domainIp+'maintain/apporder/completeOrder',{param:this.encrypt(JSON.stringify(paramfetch))})
                .then((response) => {
                    if(response.code == 0){
                        console.log(response)
                        _this.$router.push({
                            path:'/repairman'
                        }) 
                    }else {
                        _this.$message({
                            message:(response.message || '请检查网络是否连接'),
                            center: true
                        });
                    }
                }).catch(function (error) {
                    console.log(error);
                    _this.$message({
                        message:('请检查网络是否连接!'),
                        center: true
                    });
                });  


            //    this.$router.push({
            //         path:'/repairman'
            //     })                  
            },
            getUserPartsList:function(){
                let _this = this;
                let paramfetch = {
                    "pageSize":10,
                    "page":1,
                    "searchMap":{
                        "status":0,
                        "search":""
                    }
                }
                this.$fetch(this.$root.domainIp+'maintain/apporder/newProducts',{param:this.encrypt(JSON.stringify(paramfetch))})
                .then((response) => {
                    // this.loading = false;
                    if(response.code == 0){
                        let json_data = JSON.parse(this.decrypt(response.data));
                        _this.partSubmit.newProducts = json_data.data.data;
                        console.log(json_data)
                        console.log(_this.partSubmit.newProducts)
                    }else {
                        _this.$message({
                            message:(response.message || '请检查网络是否连接'),
                            center: true
                        });
                    }
                }).catch(function (error) {
                    // this.loading = false;
                    console.log(error);
                    _this.$message({
                        message:('请检查网络是否连接'),
                        center: true
                    });
                });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                console.log(file);
                console.log(file.url);
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            dlePart:function(index){
                this.partSubmit.splice(this.index,1)
            },
            addPart:function(index1){
                var tiar = this.partSubmit;
                tiar.push({
                   selectedChange:'',
                    selectedNew: '',
                    selectedOld: '',
                    partUser:'',
                    numUser:'',
                    moneyUser:'',
                    partrePlace:'',
                    numPlace:'',
                    handlePlace:[],//替换配件处理方案
                    newProducts:[],//新增使用配件
                    replaceProducts:[],//替换配件
                })
                return tiar
            },
            getTotal:function(price){
                console.log(price)
            },
            getNewProduct:function(item,index){
                console.log(item)
                this.partSubmit[index].numUser = item.productNum;
                this.partSubmit[index].moneyUser = item.price;
            }   
        },
        
    }
</script>
</script>

<style>
/* headCrm-end */
  .headCrm-end{
    width:100%;
    position:fixed; 
    top: 0;
    z-index: 99;
  }
  .billHead-end{
    text-align:center;
    font-size: 0.33rem;
    color:#fff;  
    padding:0.33rem 0; 
    /* clear: none;  */
  }
  .repairmanEnd .el-icon-arrow-left{
    position:absolute;
    left: 0.3rem;
    top:0.2rem;
    font-size: 0.6rem;
  }
  .repairmanEnd .submit-follow{
      width: 1rem;
      position:absolute;
      right: 0.3rem;
      top:0.25rem;
      background-color: #ff5000;
      line-height:0.5rem;
      text-align:center;
      color:#fff;
      border: 0.01rem solid #ffffff;
      border-radius:0.33rem;
      box-shadow:0.05rem 0.05rem 0.1rem #646464;
  }
  /* content */
  .repairmanEnd .contentCrm-end{
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 15%;  
    margin-top: 18%;
    color:#646464; 
  }
  .repairmanEndlList>ul li{
    margin: 0.4rem 0;
    font-size: 0.33rem;
  }
  .repairmanEndlList>ul li p{
    display:inline-block;
    width:40%;
  }
  .repairmanEndlList>ul li>span{
    float: right;
  }
  .repairmanEnd .remarkText{
    border:0 none;
    width:100%;
    height:auto;
    padding-top: 0.08rem;
    margin-top: 0.2rem;
  }
  .repairmanEnd .remarkText.on{
    height: 0.48rem;
  }
  .repairmanEnd .el-icon-remove{
    display:inline-block;
    font-size: 0.36rem;     
    color: #ff5000;
  }
  .repairmanEnd .part-submit div p{
      display:inline-block;
      font-size: 0.33rem;
      margin-bottom: 0.4rem;
  }
  .repairmanEnd .part-submit div div p{
      margin-left: 0.2rem;
  }

  .repairmanEnd .part-submit ul{
      font-size:0.33rem;
      margin-left: 10%;
  }
  .repairmanEnd .part-submit ul li p{
    display:inline-block;
  }
  .repairmanEnd .part-submit ul li span{
    float: right;
  }
  .repairmanEnd .part-submit input{
    float: right;
    border:none;
    text-align:right;
    width: 2rem;
    color: #646464;
  }
  .repairmanEnd .partinput{
      text-indent:0.4rem;
      height: 0.4rem;
  }
  .repairmanEnd .selectScheme{
    border:none;
    float: right;
    font-size:0.33rem;
    color: #646464;
  }
  .repairmanEnd .selectScheme option{
    font-size:0.25rem;
  }
  .repairmanEnd .el-icon-circle-plus{
    font-size: 0.36rem;   
    display:inline-block;  
    width: 0.6rem; 
    color: #ff5000;
  }
  .repairmanEnd .add-Part-text{
    font-size: 0.33rem;
  }
  .repairmanEnd .but-switch{
    height: 0.3rem;
    float: right;
  }
  .repairmanEnd .el-form-item{
    height: 0.33rem;
    margin:0rem;
  }
  .repairmanEnd .el-form-item__content{
    line-height:0.33rem;
    font-size:0.33rem;
  }
  .repairmanEnd div.el-form-item__content{
    line-height:0;
  }
  .repairmanEnd .el-form.but-switch{
    height: 0rem;
  }
  .repairmanEnd .selectNewPart{
    width: 90%;
    height: 0.7rem;
    border: 0 none;
    font-size: 0.33rem;
    color: #646464;
  }
  .repairmanEnd .selectNewPart option{
      font-size: 0.25rem;
  }


/* 图片 */
.picture-end{
    margin: 0.2rem 0;
}
.picture-end .el-upload--picture-card{
    width: 2rem;
    line-height:2.5rem;
    height: 2rem;
    text-align: center;
    color: #ff5000;
}
.picture-end .picture-end .el-upload--picture-card i{
    color: #ff5000;
    font-size: 0.8rem;
}
.picture-end .el-upload-list--picture-card .el-upload-list__item{
    width: 2rem;
    height: 2rem;
}
</style>
